<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>


<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${applicationScope.KEY_SITE_NAME}</title>
<link href="resources/css/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<link href="resources/css/jquery.dataTables.css" rel="stylesheet"
	type="text/css" />
<link href="resources/css/ichecker/square/blue.css" rel="stylesheet"
	type="text/css" />
<link href="resources/css/intstyle.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="resources/scripts/jquery-1.9.1.js"></script>
<script type="text/javascript"
	src="resources/scripts/jquery-ui.custom.js"></script>
<script type="text/javascript"
	src="resources/scripts/jquery.dataTables.js"></script>
<script type="text/javascript" src="resources/scripts/jquery.icheck.js"></script>
<script type="text/javascript" src="resources/scripts/jquery.blockUI.js"></script>
<script type="text/javascript" src="resources/scripts/common.js"></script>

<script type="text/javascript">
<!--
	$(document).ready(function() {
		renderButtons();
		changeSideMenuBackColor("sideMenuIntRole");
		renderCheckBox();
		getDataTable("roletable", dataTableLabels, 5);
		
		$("#authListDialog").dialog({
			modal : true,
			autoOpen : false,
			width : 500,
			height: 600,
			open : function(event, ui) {
				$(".ui-dialog-titlebar").show();
				$(".ui-dialog-title").text("<spring:message code='Label.role.auth.update'/>" + " : " + currentRoleName );
			},
			buttons : [ {
				text : "<spring:message code='Label.dialog.ok'></spring:message>",
				click : function() {
					getBlockUI();
					updateRoleAuthRelation("admin/role/auth/update");
					$(this).dialog("close");
					/* $("input").iCheck('uncheck'); */
				}
			},
			{
				text : "<spring:message code='Label.dialog.cancel'></spring:message>",
				click : function() {
					$(this).dialog("close");
					/* $("input").iCheck('uncheck'); */
				}
			}
			],
			close: function(event,ui) {
				$("input").iCheck('uncheck');
			}
		});
	});
	
	var currentRoleName;
	var currentRowN = 0;
	function updateAuthAction(roleId,roleName,authIdStr,rowN) {
		currentRoleName = roleName;
		currentRowN = rowN;
		var idArr = authIdStr.split(',');		
		for (var i=0;i<idArr.length;i++) {
			var checkId = "check" + idArr[i];
			$("#"+checkId).iCheck('check');
		}
		$("#roleId").val(roleId);		
		$("#authListDialog").dialog("open");
	};	
	
	function updateRoleAuthRelation(action) {
		$.post(action, 
				$("#authForm").serialize(),
				function(obj, status) {
					$.unblockUI();
					location.reload();
		},
		'json'); 
	}
	//-->
</script>

<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* 此 1px 负边距可以放置在此布局中的任何列中，且具有相同的校正效果。 */
ul.nav a { zoom: 1; }  /* 缩放属性将为 IE 提供其需要的 hasLayout 触发器，用于校正链接之间的额外空白 */
</style>
<![endif]-->
</head>

<body>

	<div class="container">
		<%@include file="../header.jsp"%>
		<%@include file="sidebar.jsp"%>
		<div id="contentBoxDiv" class="content">
			<div class="subnav">
			<spring:message code="Label.menu.headnav.user"/>&gt;&gt;
			<spring:message code="Label.menu.sidenav.user.title.int"/>&gt;&gt;
			<spring:message code="Label.menu.sidenav.user.int.role"/>
			</div>
			<%@include file="../errorMessagePanel.jsp"%>
			<div class="box">
				<h2>
					<spring:message code="Label.user.internal.role" />
				</h2>
				<div class="box" style="border: none;">

					<table id="roletable" width="100%">
						<thead>
							<tr>
								<th width="5%"><spring:message code="Label.common.SN" /></th>
								<th><spring:message code="Label.role.name" /></th>
								<th><spring:message code="Label.role.auth.list" /></th>
								<th><spring:message code="Label.common.action" /></th>
							</tr>
						</thead>
						<tbody>

							<c:if test="${not empty roleList}">
								<c:forEach items="${roleList}" var="role" varStatus="stauts">
									<tr>
										<td>${stauts.index+1}</td>
										<td><spring:message code="${role.roleName}" /></td>
										<td><c:if test="${not empty role.permissionList}">
												<c:forEach items="${role.permissionList}" var="permission">
													<spring:message code="${permission.authName}" />
													<br/>
												</c:forEach>
											</c:if></td>
										<td><button class="tableButton"
												onclick="updateAuthAction(
										'${role.roleId}', '<spring:message code='${role.roleName}'/>', '${role.authIdStr}','${stauts.index}')">
												<spring:message code="Label.role.auth.update" />
											</button></td>

									</tr>
								</c:forEach>
							</c:if>

						</tbody>
					</table>
				</div>
			</div>

			<!-- end .content -->
		</div>
		<div class="clearfloat" />
		<%@include file="../footer.jsp"%>
		<!-- end .container -->
	</div>

	<div id="authListDialog" style="display: none;">
		<form id="authForm" name="authForm" method="post" action="">

			<fieldset>

				<div class="button-group-div">

					<c:if test="${not empty authList}">
						<c:forEach items="${authList}" var="auth">
							<div id="authListCol" style="width: 200px; margin-bottom: 10px;">

								<div>
									<input type="checkbox" name="selectedAuthArr"
										id="check${auth.authId}" value="${auth.authId}" />
								</div>

								<div>
									<label for="check${auth.authId}" id="label${auth.authId}"><spring:message
											code="${auth.authName}" /></label>
								</div>
							</div>
						</c:forEach>
					</c:if>

					<input type="hidden" id="roleId" name="roleId"></input>
				</div>

			</fieldset>
		</form>

	</div>

</body>
</html>

